<template>
  <div class="keywords">
    <NavbarIndex />
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-lg-8">
          <router-link v-for="item in keywordsList" :key="'keywords_'+item.id" :to="'/show/'+ item.id" :title="item.title">
            <div class="text-left py-2 border-bottom">
              <h5 class="mt-0 text-dark">{{item.title}}</h5>
              <div class="d-flex">
                <img class="mr-2" v-lazy="domain+item.thumb" :alt="item.title" v-if="item.thumb" :key="item.thumb" />
                <div>
                  <small class="text-muted">{{item.create_time*1000 | formatDate}}</small>
                  <p class="text-truncate-3 mb-0 text-muted" v-html="item.description"></p>
                </div>
              </div>
            </div>
            
          </router-link>
          <div class="spinner">
            加载中
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>
             <div class="btn btn-primary" v-on:click="infiniteHandler(state)">加载更多</div>
          <div v-if="keywordsList.length > 0" class="text-center my-2">
            <div class="btn btn-primary" v-on:click="infiniteHandler(state)">加载更多</div>
          </div>
          <div v-else>
            <infinite-loading :identifier="keywords" @infinite="infiniteHandler"></infinite-loading>
          </div>
        </div>
        <div class="col-md-12 col-lg-4">
          <div class="row">
            <div class="col-lg-12 col-md-6">
              <MallList />
            </div>
            <div class="col-lg-12 col-md-6">
              <VideoList />
            </div>
            <div class="col-lg-12 col-md-6">
              <BookList />
            </div>
            <div class="col-lg-12 col-md-6">
              <JindeHelp />
            </div>
          </div>
        </div>
      </div>
    </div>
    <FooterIndex />
  </div>
</template>

<script>
// @ is an alias to /src
import NavbarIndex from "@/components/NavbarIndex.vue";
import FooterIndex from "@/components/FooterIndex.vue";
import MallList from "@/components/MallList.vue";
import VideoList from "@/components/VideoList.vue";
import BookList from "@/components/BookList.vue";
import JindeHelp from "@/components/JindeHelp.vue";
import InfiniteLoading from "vue-infinite-loading";
import { mapState, mapActions, mapMutations } from "vuex";
import { formatDate } from '../util/date.js';
export default {
  name: "keywords",
  components: {
    NavbarIndex,
    InfiniteLoading,
    FooterIndex,
    MallList,
    VideoList,
    BookList,
    JindeHelp
  },
  data: function () {
    return { domain: process.env.VUE_APP_baseURL, data: [], state: '' }
  },
  created () {
    this.keywordsListInit(this.$route.params.keywords)
    window.scrollTo(0, 0);
  },
  computed: {
    keywords () {
      return this.$route.params.keywords;
    },
    ...mapState('news', ['keywordsList']),
  },
  methods: {
    infiniteHandler ($state) {
      // console.log('+++++++++++=============')
      this.state = $state
      this.changeKeywordsList({ keywords: this.keywords }).then(function (ret) {
        console.log('ret', ret)
        if (ret == 1) {
          $state.loaded();
        } else {
          $state.complete();
        }
      })
    },
    ...mapActions('news', ["changeKeywordsList"]),
    ...mapMutations('news', ["keywordsListInit"])
  },
  filters: {
    formatDate (time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss');  //显示到日 'yyyy-MM-dd hh:mm' //全部显示
    },
    formatTime (time) {
      var date = new Date(time);
      return formatDate(date, 'hh:mm');    //显示到小时
    },
  },
};
</script>

<style scoped>
.text-truncate-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.spinner {
  margin: 100px auto 0;
  width: 150px;
  color: #007bff;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content:center
}
 
.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #007bff;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

</style>
